<template>
    <div class="login-box" style="width: 600px">
        <h3>保险电商客服后台</h3>
        <el-form ref="form" v-bind:model="form" v-bind:rules="rules" label-width="80px">
            <el-form-item label="账号" prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item class="flex-btn">
                <el-button type="primary" @click="onSubmit('form')">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "Login",
    data() {
        return {
            form: {
                username: 'kefu1',
                password: '123456'
            },
            rules: {
                username: [
                    {required: true, message: '请输入账号', trigger: 'blur'},
                    {min: 3, max: 30, message: '账号长度在 3 到 20 个字符', trigger: 'blur'}
                ],
                password:[
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 3, max: 20, message: '密码长度在 3 到 20 个字符', trigger: 'blur'}
                ]
            }
        }
    },
    methods:{
        onSubmit:function (formName){
            //表单格式验证
            this.$refs[formName].validate((valid) => {
                var vm = this;
                if (valid) {
                    //表单格式验证成功，接入腾讯防水墙进行图形验证码验证
                    this.axios({
                        url: '/myapi/user/customer/login',
                        method: 'post',
                        //使用data是body传参，使用params是query传参
                        data: {
                            email: vm.form.username,
                            password: vm.form.password
                        }
                    }).then(function (response) {
                        if(response.data.success === true){
                            console.log(response.data);
                            //console.log(response.data.content.token);
                            let token = response.data.content.token;
                            vm.$store.commit('setToken',token);
                            let id = response.data.content.id;
                            vm.$store.commit('setId',id);
                            console.log(id);
                            //vm.$store.commit('deleteToken');
                            //console.log(vm.$store.state.token);
                            vm.$message({
                                message: '登录成功!',
                                type: 'success'
                            });
                            vm.$router.push('/home')
                        }
                        else {
                            console.log(response.data);
                            vm.$message.error('登录失败,请检查账号密码!');
                        }
                    });

                } else {
                    console.log('error submit!!');
                    this.$message.error('请输入正确的格式');
                    return false;
                }
            });
        }
        ,toRegisterComponent:function () {
            this.$router.push("/register")
        }
        ,toAdminLoginComponent:function () {
            this.$router.push("/adminLogin")
        }
        ,toModifyComponent:function () {
            this.$router.push("/modifyPersonalInformation")
        }
        ,toPasswordComponent:function () {
            this.$router.push("/password")
        }
    }
}
</script>

<style scoped>
.login-box{
    width: 600px;
    height: 250px;
    border: 1px solid #2c3e50;
    margin: 150px auto;
    padding: 10px 50px 20px 20px;
    border-radius: 20px;
    box-shadow: 2px 2px 20px #2c3e50;
}
.flex-btn{
    float: left;
}

#link_1{
    margin-bottom: 10px;
}
</style>
